import React, { useEffect, useState } from 'react';
import BreadcrumbBox from '@/components/Base/BreadcrumbBox';
import { Card, InputNumber, Button, message, Select, Radio } from 'antd'
import { withRouter } from 'react-router-dom';
import { 
  getInsideUserList,
  orderPlace,
} from '@/api/order'
import { 
  memberParam,
} from '@/api/api'
import './index.scss';
const Registration = (props) => {
  // 面包屑
  const breadcrumbList = ['订单管理','挂单管理']
  
  const [loading, setLoading] = useState(false)
  const [userName, setUserName] = useState([])
  const [unitPrice, setUnitPrice] = useState('')
  const [num, setNum] = useState('')
  const [minNum, setMinNum] = useState('')
  const [payment, setPayment] = useState([])
  const [member, setMember] = useState([])
  const [currencyOptions, setCurrencyOptions] = useState([]);
  const [isSplitOrder, changeIsSplitOrder] = useState(1);
  
  
  
  const getMember = () => {
    try {
      getInsideUserList().then(res=>{
        if(res.code === 0) {
          if(res.data){
            let arr = []
            res.data.forEach(item=>{
              arr.push({ value: item.id, label: item.username })
            })
            setMember(arr)
          }
        }
      })
    } catch(error) {
      console.log(error)
    }
  };
  
  const memberParamHanlder = async () => {
    try {
      let res = await memberParam()
      if(res.code === 0) {
        if(res.data&&res.data.memberPayeeTypeList){
          let arr = []
          res.data.memberPayeeTypeList.forEach(item=>{
            arr.push({
              value: item.code,
              label: item.name,
            })
          })
          setCurrencyOptions(arr)
        }
      }
    } catch(error) {
      console.log(error)
    }
  }
  
  const handle = async () => {
    try {
      if(!userName || userName.length===0){
        message.warning('请选择用户')
        return false;
      }
      if(!unitPrice || unitPrice===0){
        message.warning('请输入单价')
        return false;
      }
      if(isSplitOrder===null || isSplitOrder===''){
        message.warning('请选择订单是否拆分')
        return false;
      }
      if(!num || num===0){
        message.warning('请输入出售数量')
        return false;
      }
      if(isSplitOrder===1&&(minNum===null || minNum==='' || minNum===undefined)){
        message.warning('请输入最小起售数量')
        return false;
      }
      if(!payment || payment.length===0){
        message.warning('请选择收款方式')
        return false;
      }
      let params = {
        "userIds": userName,
        "price": unitPrice,
        "isSplitOrder": isSplitOrder,
        "sellCount": num,
        "minSellCount": minNum,
        "paySettingIds": payment
      }
      let res = await orderPlace(params)
      if(res.code === 0) {
        message.success('创建成功')
        reset()
      }
    } catch(error) {
      console.log(error)
    }
  }
  
  const reset = () =>{
    setUserName([])
    setUnitPrice('')
    setNum('')
    setMinNum('')
    setPayment([])
  }
  // 初始化
  useEffect(() => {
    memberParamHanlder()
    getMember()
    // eslint-disabled-next-line react-hooks/exhaustive-deps
  }, [])
  return (
  
    <div className='registration-content'>
      <BreadcrumbBox list={breadcrumbList}></BreadcrumbBox>
      <div className='registration-main'>
        <Card className="center">
          <div className='body'>
            <span className="text">用户名:</span>
            <Select
             value={userName}
             onChange={(e) => {
               setUserName(e)
             }}
             allowClear
             style={{width:'500px'}}
             mode="multiple" 
             options={member} />
          </div>
          <div className='body'>
            <span className="text">设定单价:</span>
            <InputNumber style={{width:'500px'}} allowClear type='text' value={unitPrice} onChange={(e) => {
              setUnitPrice(e)
            }}/>
          </div>
          <div className='body'>
            <span className="text">订单拆分:</span>
            <Radio.Group onChange={(ev) => {
              changeIsSplitOrder(ev.target.value)
            }} value={isSplitOrder}>
              <Radio value={1}>可拆分</Radio>
              <Radio value={0}>不可拆分</Radio>
            </Radio.Group>
          </div>
          <div className='body'>
            <span className="text">出售数量:</span>
            <InputNumber style={{width:'500px'}} allowClear type='text' value={num} onChange={(e) => {
              setNum(e)
            }}/>
          </div>
          {
            isSplitOrder === 1
            ?
            <div className='body'>
              <span className="text">最小起售:</span>
              <InputNumber style={{width:'500px'}}  allowClear type='text' value={minNum} onChange={(e) => {
                setMinNum(e)
              }}/>
            </div>
            :
            ''
          }
          <div className='body'>
            <span className="text">收款方式:</span>
            <Select 
              style={{width:'500px'}} 
              value={payment}
              onChange={(e)=>{setPayment(e)}} 
              mode="multiple" 
              options={currencyOptions} 
              allowClear />
          </div>
          <div className='btnCon'>
            <Button onClick={()=>{
              reset()
            }}>
              重置
            </Button>
            <Button loading={loading} disabled={loading} className="su-btn" type="primary" htmlType="button" onClick={()=>{
              handle()
            }}>
              确认出售
            </Button>
          </div>
        </Card>
      </div>
    </div>
  )
}
export default withRouter(Registration)